<template>
	<view class="Global">
		<!-- <image class="imagepage" src="/static/background@2x.png" mode=""></image> -->
		<bgImage></bgImage>
		<MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>


		<view class="contentTop" id="main">

			<view class="contentTopLeft">
				<text class="contentTopLeftText">全部打印机（8）</text>
			</view>

			<text class="contentTopRightText">刷新</text>

		</view>


		<scroll-view scroll-y="true" class="contentCenter" :style="'height:'+scrollViewHeight+'px'">
			<!-- 设备列表开始 -->
			<view class="shebeiListContent">

				<view class="shebeiListContentInner" v-for="(item,index) in deviceListData">

					<view class="shebeiListContentInnerLeft">
						<image class="shebeiListContentInnerLeftImg" src="/static/gongzuotai/dayinji@2x.png" mode="">
						</image>
						<text class="shebeiListContentInnerLeftText">{{item.title}}</text>
					</view>

					<view class="shebeiListContentInnerRight">
						<text class="shebeiListContentInnerRightText">连接</text>
					</view>

				</view>

			</view>
			<!-- 设备列表结束 -->

		</scroll-view>




		<view class="loginContent" id="mainBottom" @click="OperationClickOpen()">

			<button style="color:#ffffff" class="login" type="default">{{login}}</button>
		</view>


	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'
	import bgImage from '@/components/backgroundImage.vue'

	export default {
		components: {
			MyNav,
			bgImage
		},
		data() {
			return {
				login: '蓝牙搜索',

				title: '打印机列表',

				isback: true,
				// 设备列表

				deviceListData: [{

						title: '打印机GP-9024D'
					},
					{

						title: '我要吃个大西瓜hgiksdlahfiq'
					},
					{

						title: '打印机GP-9024D'
					},
					{

						title: 'Bluetooth-2684'
					},
					{

						title: '打印机GP-9024D'
					},
					{

						title: '我要吃个大西瓜hgiksdlahfiq'
					},
					{

						title: '打印机GP-9024D'
					},
					{

						title: 'Bluetooth-2684'
					},
					{

						title: '打印机GP-9024D'
					},
					{

						title: '我要吃个大西瓜hgiksdlahfiq'
					},
					{

						title: '打印机GP-9024D'
					},
					{

						title: '1Bluetooth-2684'
					}
				],

				mainTop: '',
				bottomTop: '',
				scrollViewHeight: 0,



			}
		},

		onReady() {
			// 获取距离顶部的距离
			let query = uni.createSelectorQuery().in(this);
			query.select('#main').boundingClientRect(data => {
				// console.log(data);
				this.mainTop = data.top

				// console.log('1底部距离', this.mainTop);

				// 在其他页面或组件中访问
				// const app = getApp();
				// this.scrollViewHeight = app.globalData.system.screenHeight - this.mainTop - app.globalData
				// 	.totalHeight


				/* console.log('获取距离',this.mainTop,this.scrollViewHeight);
				console.log('滚动距离',this.scrollViewHeight); */
			}).exec();

			query.select('#mainBottom').boundingClientRect(data => {
				this.bottomTop = data.top
				// console.log('2底部距离', this.bottomTop);

				this.scrollViewHeight = this.bottomTop - this.mainTop
				// console.log('可滚动距离', this.scrollViewHeight);
			}).exec();



		},
		methods: {
			// 蓝牙搜索
			OperationClickOpen() { 
				uni.navigateTo({
					url: '/subPack/bluetooth/bleConnect/bleConnect',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
	.loginContent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750rpx;
		position: absolute;
		bottom: 30rpx;

	}

	.login {
		display: flex;
		justify-content: center;
		margin-top: 40rpx;
		align-items: center;
		text-align: center;


		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 30rpx;

		width: 690rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 20rpx;




	}

	.contentCenter {

		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 900rpx;
	}

	.shebeiListContentInnerLeftText {

		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 30rpx;


	}

	.shebeiListContentInnerRightText {

		width: 140rpx;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 16rpx;

		display: flex;
		justify-content: center;
		align-items: center;

		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #0081FF;
		line-height: 36rpx;

		margin-right: 30rpx;
	}

	.shebeiListContentInnerRight {

		display: flex;
		justify-content: center;
		align-items: center;
	}


	.shebeiListContentInnerLeftImg {

		width: 30rpx;
		height: 30rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}


	.shebeiListContentInnerLeft {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
	}


	.shebeiListContentInner {

		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		width: 100%;
		margin-bottom: 70rpx;
	}



	.shebeiListContent {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		width: 100%;

		margin-top: 70rpx;
	}




	.contentTopRightText {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100rpx;
		height: 50rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 16rpx;


		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 30rpx;

		margin-right: 30rpx;
	}

	.contentTopLeftText {
		display: flex;

		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 36rpx;
		color: #333333;
		line-height: 30rpx;

		justify-content: center;
		align-items: center;

	}

	.contentTopLeft {
		display: flex;
		margin-left: 30rpx;

	}

	.contentTop {

		display: flex;

		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin-top: 50rpx;
	}
</style>